<template>
	<div class="flexcenter">
		<div class="max_width paddingtb">
			<div class="mainpadding ffffff radius">
				<!-- 收货地址 -->
				<div class="flexbetween">
					<div class="text_f color_zero">确认收货地址</div>
					<div class="text_f color_theme pointer" @click="goAddress">管理收货地址</div>
				</div>
				<div class="addressBox margin_top2 pointer" :class="address_id==item.id?'active color_theme':'color_six'"
					v-for="(item,index) in list.data" :key="item.id" @click="address_id = item.id">
					<div class="text_b">
						<span class="margin_right1">{{item.name}}</span>
						<span class="margin_right1">{{item.region}}</span>
						<span class="margin_right1">{{item.address}}</span>
						<span class="margin_right1">{{item.mobile}}</span>
						<span class="color_theme" v-show="item.is_default">默认地址</span>
					</div>
				</div>
				<div class="flexcenter margin_top" v-if="list.total > 12">
					<el-pagination background layout="prev, pager, next" :page-size="12" :total="list.total"
						@current-change="tuijianchange">
					</el-pagination>
				</div>
				<!-- 商品信息确认 -->
				<div class="margin_top">
					<div class="text_f color_zero">商品信息确认</div>
					<div class="margin_top">
						<el-table :data="dataAll.goods_data" max-height="450" border style="width: 100%">
							<el-table-column prop="name" align="center" label="商品信息" width="300"
								label-class-name="color_zero" class-name="color_three">
								<template slot-scope="scope">
									<div class="flexleft">
										<img class="imgBox margin_right2" :src="scope.row.image_text" alt="">
										<div class="text_b color_zero">{{scope.row.goods_name}}</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="date" align="center" label="属性" label-class-name="color_zero"
								class-name="color_three">
								<template slot-scope="scope">
									<div>
										<div class="text_b color_zero">{{scope.row.sku}}</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="address" align="center" label="单价" label-class-name="color_zero"
								class-name="color_three">
								<template slot-scope="scope">
									<div class="text_b color_zero">￥{{scope.row.price}}</div>
								</template>
							</el-table-column>
							<el-table-column prop="address" align="center" label="数量" label-class-name="color_zero"
								class-name="color_three">
								<template slot-scope="scope">
									<el-input-number v-model="scope.row.goods_num" :min="1"
										label="数量"></el-input-number>
								</template>
							</el-table-column>
							<el-table-column prop="phone" align="center" label="小计" width="120"
								label-class-name="color_zero" class-name="color_orangeSmall">
								<template slot-scope="scope">
									<div class="text_b color_orangeSmall">￥{{scope.row.price * scope.row.goods_num}}</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<!-- 留言 -->
				<div class="margin_top flexleft padding_bottom line_bottom">
					<div class="text_d color_zero white_nowrap margin_left2 margin_right2">留言</div>
					<el-input v-model="remarks" placeholder="请输入留言内容"></el-input>
				</div>
				<!-- 支付方式 -->
				<div class="margin_top flexleft">
					<div class="text_d color_zero margin_right2">支付方式</div>
					<div class="pointer" :class="pay_type==1?'wayActive margin_right2':'way margin_right2'" @click="pay_type=1">
						<img class="weixinImg" src="../../static/image/home/weixinPay.png" alt="">
						<div class="text_d color_zero">微信支付</div>
					</div>
					<div class="pointer" :class="pay_type==3?'wayActive margin_right2':'way margin_right2'" @click="pay_type=3">
						<img class="balanceImg" src="../../static/image/home/balance.png" alt="">
						<div class="text_d color_zero">余额支付</div>
					</div>
				</div>
				<!-- 支付金额 -->
				<div class="margin_top flexbetween">
					<div class="flexleft">
						<div class="text_d color_zero margin_right2">支付金额</div>
						<div class="text_d color_red">￥{{pay_price}}</div>
					</div>
					<div class="themeBtnbr pointer" @click="submit()">确认支付</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {order_show,create_order} from "@/API/goods"
	import {
		address_getlist
	} from "@/API/address"
	export default {
		data() {
			return {
				num: 1,
				pay_type: 1, // 1微信支付 3余额支付
				
				goods_num: "",
				goods_id: "",
				goods_sku_unique: "",
				address_id: "",
				dataAll: {},
				remarks: "",
				page: 1,
				list: {
					data: []
				},
				
			}
		},
		mounted() {
			this.goods_num = this.$route.query.goods_num
			this.goods_id = this.$route.query.goods_id
			this.goods_sku_unique = this.$route.query.goods_sku_unique
			this.getdingdan()
			this.init()
		},
		computed:{
			pay_price(){
				let price = 0
				this.dataAll.goods_data.forEach(item=>{
					price = item.goods_num * item.price + Number(price)
				})
				return price
			}
		},
		methods: {
			submit(){
				if(this.address_id==""){
					this.$message.warning("请选择收货地址")
					return false
				}
				create_order({
					address_id:this.address_id,
					goods_num:this.goods_num,
					goods_id:this.goods_id,
					goods_sku_unique:this.goods_sku_unique,
					platform:"PC",
					remarks:this.remarks,
					pay_type:this.pay_type,
				}).then(res => {
					if(res.data.code==1){
						if(this.pay_type==3){//余额支付
							this.$message.success("支付成功")
							this.$router.go(-1)
						}
					}else{
							this.$message.error(res.data.msg)
						}
				})
			},
			init(page) {
				address_getlist({
					page: page || 1,
				}).then(res => {
					this.list = res.data.data
					this.list.data = res.data.data.data;
				})
			},
			// 推荐页码改变调用接口
			tuijianchange(val) {
				this.init(val)
			},
			goAddress(){ //收货地址
				this.$router.push({
					path:"/setUp/address"
				})
			},
			getdingdan() {
				let data = {
					address_id: this.address_id,
					goods_num: this.goods_num,
					goods_id: this.goods_id,
					goods_sku_unique: this.goods_sku_unique,
				}
				order_show(data).then(res => {
					if (res.data.code == 1) {
						this.dataAll = res.data.data
						if (res.data.data.address_info) {
							this.address_id = res.data.data.address_info.id
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.addressBox {
		padding: 5px 35px;
	}

	.active {
		border: 1px solid #3478F5;
		background: rgba(52, 120, 245, 0.1);
	}

	.imgBox {
		width: 75px;
		min-width: 75px;
		height: 75px;
		border-radius: 9px 9px 9px 9px;
	}

	.mesageBack {
		// background: rgba(186, 211, 255, 0.1);
		background: red;
	}

	.way {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #EAEAEA;
	}

	.wayActive {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
	}

	.weixinImg {
		width: 14px;
		min-width: 14px;
		height: 12px;
		margin-right: 5px;
	}

	.balanceImg {
		width: 14px;
		min-width: 14px;
		height: 14px;
		margin-right: 5px;
	}
</style>